<template>
  <div class="forget_password_page">
    <Logo />
    <div class="content">
      <div class="form_box">
        <h3 class="title">忘记密码</h3>
        <el-form ref="form" :model="form" :rules="rules">
          <el-form-item prop="phonenumber">
            <el-input placeholder="请输入管理员账号" v-model="form.phonenumber" auto-complete="off">
              <i slot="prefix" class="el-icon-mobile-phone"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input placeholder="请输入新登录密码" v-model="form.password" type="password">
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="confrimPassword">
            <el-input placeholder="请再次输入新登录密码" v-model="form.confrimPassword" type="password">
              <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="code" class="code_line">
            <el-input placeholder="请输入短信验证码" v-model="form.code">
              <i slot="prefix" class="el-icon-mobile-phone"></i>
            </el-input>
            <el-button
              type="text"
              class="code"
              :loading="codeLoading"
              @click="getCode"
            >{{ sNumber > -1 ? sNumber + 's' : '获取验证码' }}</el-button>
          </el-form-item>
          <div class="tips">短信验证码5分钟内有效，超时请重新获取</div>
        </el-form>
        <div class="btn_box">
          <el-button type="primary" class="btn" @click="handleRetrievePassword">提交</el-button>
        </div>
      </div>
    </div>
    <Copyright />
  </div>
</template>

<script>
import Logo from "@/customComponents/logo";
import Copyright from '@/customComponents/copyright';
import { getCode, retrievePassword } from '@/api/login'

export default {
  name: "Register",
  components: {
    Logo,
    Copyright,
  },
  data() {
    return {
      form: {
        phonenumber: '',
        code: '',
        password: '',
        confrimPassword: '',
        uuid: ''
      },
      rules: {
        phonenumber: [
          { required: true, trigger: "blur", message: "请输入管理员账号" },
          {
            validator: (rule, value, callback) => {
              if (/^1\d{10}/.test(value)) {
                callback()
              } else {
                callback('请输入正确手机号')
              }
            },
            trigger: ["change", 'blur'],
          },
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入新登录密码' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请输入密码'));
              } else {
                if (this.form.confrimPassword !== '') {
                  this.$refs.form.validateField('confrimPassword');
                }
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        confrimPassword: [
          { required: true, trigger: 'blur', message: '请再次输入新登录密码' },
          {
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, trigger: 'change', message: '请输入短信验证码' }
        ],
      },
      codeLoading: false,
      sNumber: -1, // 倒计时
      timer: null, // 倒计时
    };
  },
  created() {

  },
  methods: {
    countFn() {
      this.timer = setTimeout(() => {
        if (this.sNumber > -1) {
          --this.sNumber
          this.countFn()
        } else {
          clearTimeout(this.timer)
          this.timer = null
        }
      }, 1000);
    },
    countDown() {
      this.sNumber = 60
      this.countFn()
    },
    getCode() {
      this.$refs.form.validateField(['phonenumber'], (valid) => {
        if (!valid) {
          getCode({ phonenumber: this.form.phonenumber }, 2).then((res) => {
            this.form.uuid = res.uuid
            this.countDown()
          })
        }
      })
    },
    handleRetrievePassword() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const { phonenumber, password, code, uuid } = this.form
          retrievePassword({ phonenumber, password, code, uuid }).then((res) => {
            if (res.code === 200) {
              this.$message({
                type: 'success',
                message: '提交成功',
                onClose: () => {
                  this.$router.replace({
                    path: '/login'
                  })
                }
              })
            }
          })
        }
      })
    },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
@import '@/assets/styles/px2rem.scss';
@import "@/assets/styles/variables.scss";

.forget_password_page {
  height: 100%;
  background: url("../assets/register/forget_password_bg.png") no-repeat 0 0;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .content {
    width: px2rem(1400);
    background-color: #fff;
    box-shadow: rgba(0, 88, 255, 0.4) px2rem(5) px2rem(6) px2rem(14) 0;
    border-radius: px2rem(20);
    margin: 0 auto;
    padding: px2rem(87) 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .form_box {
      width: px2rem(504);
      .title {
        color: $theme;
        font-size: px2rem(36);
        font-weight: 600;
        height: px2rem(50);
        line-height: px2rem(50);
        text-align: center;
        margin-bottom: px2rem(48);
      }
      .code_line {
        position: relative;
        .code {
          position: absolute;
          top: 0;
          bottom: 0;
          right: px2rem(14);
          z-index: 2;
        }
      }
      .tips {
        color: #999;
        font-size: 14px;
      }
      .btn_box {
        display: flex;
        justify-content: center;
        margin-top: px2rem(48);

        .btn {
          width: px2rem(504);
          margin: 0 auto;
          width: 100%;
          background: linear-gradient(90deg, #0058ff 0%, #69adff 100%);
          border: none;
          height: px2rem(48);
          font-weight: 600;
          font-size: 18px;
        }
      }
    }
  }
}
</style>
